<template>
    <div>
        <back></back>
        <div class="registe">
            <p class="login">登录华侨城</p>
            <div class="d-flex phone">
                <span>+86</span>
                <input
                    type="digit"
                    maxlength="11"
                    placeholder="请输入手机号"
                    placeholder-style="color:#ccc;"
                    @input="getPhoneNumber"
                >
            </div>
            <div
                class="phone password"
                v-if="!loginMode"
            >
                <input
                    v-model.lazy="password"
                    type="password"
                    placeholder="请输入密码"
                    placeholder-style="color:#ccc;"
                    @input="getPassword"
                >
            </div>
            <p
                class="unregiste"
                v-else
            >未注册的手机号验证后自动创建华侨城账户</p>
            <div
                class="code"
                v-if="loginMode"
            >
                <button
                    type="primary"
                    @click="identifyLogin"
                >获取短信验证码</button>
                <p @click="changeLogin">密码登录</p>
            </div>
            <div
                class="code"
                v-else
            >
                <button
                    type="primary"
                    @click="passLogin"
                >登录</button>
                <p @click="changeLogin">验证码登录</p>
            </div>
        </div>
    </div>
</template>
<script>
import XXTEA from "@/utils/xxtea";

export default {
    data() {
        return {
            phoneNumber: "",
            password: "",
            phoneTurth: false,
            passTurth: false,
            loginMode: true
        };
    },
    methods: {
        changeLogin() {
            this.loginMode = !this.loginMode;
        },
        // 获取填写的手机号
        getPhoneNumber(e) {
            this.phoneNumber = e.mp.detail.value;
        },
        // 获取填写的密码
        getPassword(e) {
            this.password = e.mp.detail.value;
        },
        // 校验手机号
        checkPhone() {
            var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if (!reg.test(this.phoneNumber)) {
                wx.showModal({
                    content: "请输入正确的手机号",
                    showCancel: false,
                    confirmText: "好的"
                });
                this.phoneTurth = false;
            } else {
                this.phoneTurth = true;
            }
        },
        // 校验密码
        checkPassword() {
            if (this.phoneTurth && this.password === "") {
                wx.showModal({
                    content: "请输入密码",
                    showCancel: false,
                    confirmText: "好的"
                });
                this.passTurth = false;
            } else {
                this.passTurth = true;
            }
        },
        // 验证码登录
        identifyLogin() {
            this.checkPhone();
            if (this.phoneTurth) {
                wx.showModal({
                    content: `我们将发送验证码到${this.phoneNumber}`,
                    confirmText: "确认",
                    success: res => {
                        if (res.confirm) {
                            wx.navigateTo({
                                url:
                                    "/pages/identify/main?phoneNumber=" +
                                    this.phoneNumber
                            });
                        }
                    }
                });
            }
        },
        // 密码登录
        passLogin() {
            this.checkPhone();
            this.checkPassword();
            if (this.phoneTurth && this.passTurth) {
                this.$http
                    .post({
                        url: this.$services.PASS_LOGIN,
                        data: {
                            mobile: this.phoneNumber,
                            password: XXTEA.encryptToBase64(
                                this.password,
                                "66d9a3240d3461ad07df52ccbc8da2fc"
                            )
                        }
                    })
                    .then(res => {});
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.registe {
    padding: 90px 30px 0;
    .login {
        font-size: 20px;
        font-weight: bold;
    }
    .unregiste {
        font-size: 12px;
        margin: 5px 0 20px;
    }
    .phone {
        margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        span {
            font-size: 12px;
            margin-right: 15px;
        }
    }
    .password {
        margin-bottom: 20px;
    }
    .code {
        text-align: center;
        button {
            border-radius: 20px;
            margin-bottom: 10px;
        }
    }
}
</style>